<template>
	<view class="padding_30">
		<view class="edit-item">
			<view class="title">
				意见反馈
			</view>
			<textarea class="area" name="" id="" cols="30" rows="10" placeholder="请输入您宝贵的意见" maxlength="100" v-model="formData.content"></textarea>
		</view>
		<view class="input-item flex">
			<view class="input-title">
				联系方式
				<text style="color: #999;">(非必填)</text>
			</view>
			<view class="input-box">
				<input placeholder-class="Placeholder" class="Input" type="number" placeholder="请输入联系方式" maxlength="11" v-model="formData.mobile" />
			</view>
		</view>
		<view class="title">
			上传截图
		</view>
		<view class="upload-box" @click="upload" v-if="formData.image">
			<image class="image-pic" :src="formData.image" mode="aspectFill"></image>
		</view>
		<view class="upload-box" @click="upload" v-else>
			<image class="add" src="@/pages/user/static/images/add.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { getCurrentInstance } from "vue";
	const { proxy } = getCurrentInstance();
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	const userstore = useUserStore()
	const formData = reactive({
		content: '',
		mobile: '',
		image: ''
	})
	const upload = async () => {
		// 图片上传
		let res = await proxy.$request.headportraits()
		formData.image = uni.getStorageSync('baseUrl') + '/' + res
		uni.$uv.toast('上传成功')
	}
	const submit = throttle(() => {
		userstore.submitFeedBack(formData)
	}, 200)
</script>

<style lang="scss" scoped>
	.edit-item {
		padding: 30rpx;
		width: 690rpx;
		height: 340rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.area {
			padding-top: 30rpx;
			font-size: 28rpx;
		}
	}

	.input-item {
		justify-content: space-between;
		width: 690rpx;
		height: 112rpx;
		margin: 30rpx auto;
		padding: 30rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.input-title {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.input-box {
			text-align: right;

			.Input {
				font-size: 28rpx;
			}
		}
	}

	.upload-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 60rpx 0;
		width: 218rpx;
		height: 218rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.add {
			width: 38rpx;
			height: 38rpx;
		}

		.image-pic {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.btn {
		position: fixed;
		bottom: 30rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
</style>